<template>
  <div v-show="edit">
    <table-where :forms="forms"></table-where>
    <wms-table ref="tableQuery" :tableDatas="tableDatas" @editHandle="editHandle"></wms-table>
  </div>
  <div v-show="!edit">
    <addTableHead @close="addClick" :editTbleDatas="editTbleDatas" ref="addTableHeadRef"></addTableHead>
  </div>
</template>

<script setup name="表格配置">
import { ref, reactive } from 'vue'
import {POSTJSON} from '@/components/utils/http'
import addTableHead from './addTableHead.vue'
const edit = ref(true)
const tableQuery = ref()
const onSubmit = () => {
  tableQuery.value.getData()
}
const addClick = () => {
  edit.value = !edit.value
}

const tableDatas = reactive({
  body: {
    //表数据
    head: 'tableHead',
    url: '/Menu/tableHeadPage',
    params: {},
    type: 'POSTJSON'
  },
  delete: {
    url: '/Menu/deleteMenu',
    params: { tabl: 'id' }
  },
  edit: true
})
const editTbleDatas = reactive({
  head: [
    { name: '字段名称', value: 'tname', type: 'input', rule: { required: true } },
    { name: '字段Key', value: 'tvalue', type: 'input', rule: { required: true } },
    {
      name: '类型',
      value: 'ttype',
      type: 'select',
      options: [
        { label: '字符串', value: 'string' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' }
      ],
      rule: { required: true }
    },
    { name: '格式化', value: 'format', type: 'input' },
    { name: '是否隐藏', value: 'tshow', type: 'switch', options: { true: 1, false: 0 } },
    { name: '是否合计', value: 'sumTag', type: 'switch', options: { true: 1, false: 0 } },
    {
      name: '字段位置',
      value: 'align',
      type: 'radio',
      options: [
        { name: '左', value: 'left' },
        { name: '中', value: 'center' },
        { name: '右', value: 'right' }
      ]
    },
    {
      name: '固定列',
      value: 'fixed',
      type: 'radio',
      options: [
        { name: '左', value: 'left' },
        { name: '右', value: 'right' },
        { name: '不固定', value: null }
      ]
    },
    { name: '顺序', value: 'head_sort', type: 'input' },
    { name: '表格名称', value: 'table_key' }
  ],
  editData: [],
  getRow: () => {
    return {
      ttype: 'string',
      tshow: '1',
      align: 'left',
      table_key: forms.data['table_key']
    }
  }
})
const editHandle = ({ row }) => {
  
  POSTJSON("/Menu/tableHeadPage",{table_key:row.table_key}).then(data=>{
    editTbleDatas.editData = data.data;
    addTableHeadRef.value.setFromData(
      {table_key:editTbleDatas.editData[0].table_key}
    );
    edit.value = false
  })
}
const forms = reactive({
  data: tableDatas.body.params,
  rules: [],
  compValue: [
    { label: '编号', value: 'table_key', type: 'iconinput', placeholder: 'key', show: true },
    { label: '新增', type: 'button', onclick: addClick },
    { label: '查询', type: 'button', onclick: onSubmit }
  ]
})
const addTableHeadRef = ref();

</script>
